<template>
  <div class="details-box">
    <img v-if="data.picture" :src="dynamicImageSrc(data.picture)" alt="" />
    <img
      v-else
      src="../assets/img/wutu.gif"
      alt=""
      style="border: 1px solid #f2f2f2"
    />
    <div class="info">
      <h4 class="title">{{ data.title }}</h4>
      <div class="content" :title="data.content">{{ data.content }}</div>
      <span class="price">￥{{ data.price }}</span>
      <div class="time">
        <span style="margin-right: 30px"
          >发布时间：{{ formatDate(data.createTime) }}</span
        >
        <span>最近修改时间：{{ formatDate(data.updateTime) }}</span>
      </div>
      <div class="item-style">
        <div class="operation">
          <div class="operation-item">
            <img src="../assets/img/good.png" class="operation-img" alt="" />
            点赞
          </div>
          <div class="operation-item">
            <img src="../assets/img/no-star.png" class="operation-img" alt="" />
            收藏
          </div>
          <div class="operation-item">
            <img
              src="../assets/img/fill-in.png"
              class="operation-img"
              alt=""
            />评论
          </div>
        </div>
        <div class="btn-content">
          <el-button
            type="danger"
            @click="addShopcart"
            v-if="data.type == 'goods'"
            >加入购物车</el-button
          >
          <el-popover
            placement="right"
            width="320"
            trigger="hover"
            v-if="data.type == 'needs'"
          >
            <template #reference>
              <el-button type="danger" @click.once="contactBuyer(data.orderId)">
                联系买家
              </el-button>
            </template>
            <div>
              <div class="item-sales">
                卖家姓名：<span class="sales-text">{{
                  sellerInfo.userName
                }}</span>
              </div>
              <div class="item-sales">
                卖家地址：<span class="sales-text">{{
                  sellerInfo.address
                }}</span>
              </div>
              <div class="item-sales">
                卖家手机号码：<span class="sales-text">{{
                  sellerInfo.phone
                }}</span>
              </div>
              <div class="item-sales">
                更新时间：<span class="sales-text">{{
                  formatDate(sellerInfo.updateTime)
                }}</span>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { addOrderToCart } from "../api/cart";
import { selectOrderById } from "../api/order";
import { selectUserByUsername } from "../api/user";
import { useDetailsStore } from "@/stores/detail";
import { useRoute } from "vue-router";
const route = useRoute();

const store = useDetailsStore();
const data = ref({});
const sellerInfo = ref({});
const imgShowRoad = store.imgShowRoad;

const dynamicImageSrc = (params) => {
  return new URL(`../assets/file/order/${params}`, import.meta.url).href;
};

const addShopcart = () => {
  addOrderToCart({ order_id: data.value.orderId })
    .then((res) => alert(res.message))
    .catch(() => alert("添加失败,请先登录"));
};

const contactBuyer = async (orderId) => {
  store.updateChangedOrderId(orderId);
  const res = await selectOrderById({ id: orderId });
  if (res.data) {
    data.value = res.data;
    // console.log(data.value);

    getSalesInfo();
  }
};

const orderId = route.query.orderId;
contactBuyer(orderId);

const getSalesInfo = async () => {
  const res = await selectUserByUsername({ user_name: data.value.ownName });
  if (res) {
    sellerInfo.value = res.data;
  }
};

const formatDate = (time) => {
  if (!time) return "";
  const date = new Date(time);
  return date.toISOString().split("T")[0]; // 通过 'T' 分割并取第一部分作为日期
};
</script>

<style lang="less" scoped>
.details-box {
  width: 1300px;
  height: 100%;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  img {
    width: 360px;
    height: 300px;
    border-radius: 6px;
  }
  .info {
    position: relative;
    width: 680px;
    height: 300px;
    border: 1px solid #f2f2f2;
    border-radius: 6px;
    padding: 10px 20px;
    .title {
      font-size: 22px;
      font-weight: bold;
    }
    .content {
      height: 100px;
      border: 1px dashed #f2f2f2;
      line-height: 23px;
      padding: 5px 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }
    .price {
      color: red;
      font-size: 25px;
      font-weight: bold;
    }
    .time {
      margin-top: 5px;
      color: #999;
      display: flex;
      justify-content: flex-start;
    }
    .item-style {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 5px;
      align-items: center;
    }
  }
  .operation {
    display: flex;
    margin-top: 10px;
    margin-right: 150px;
    .operation-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      .operation-img {
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
        border-radius: 6px;
      }
    }
  }
  .btn-content {
    margin-top: 10px;
  }
  .item-sales {
    color: #333 !important;
    line-height: 30px;
    max-height: 30px;
    .sales-text {
      color: #666;
    }
  }
}
</style>